<div data-ng-class="fluidHeaderLayout ? 'container-fluid' : 'container'">
  <div class="navbar-header">
    <a class="hidden-sm hidden-md hidden-lg pull-left gn-logo-link" data-gn-active-tb-item="{{gnCfg.mods.home.appUrl}}" data-ng-hide="{{gnCfg.mods.header.isLogoInHeader}}">
      <img class="gn-logo"
           alt="{{'siteLogo' | translate}}"
           data-ng-src="{{gnUrl}}../images/logos/{{info['node/id'] || info['system/site/siteId']}}.png?random{{info['system/site/lastUpdate']}}"/>
    </a>
    <a class="hidden-sm hidden-md hidden-lg btn btn-link pull-left"
       data-gn-active-tb-item="{{gnCfg.mods.home.appUrl}}">
      <span class="gn-name"
            data-ng-class="authenticated && user.isEditorOrMore() ? 'gn-truncate' : ''"
            title="{{info['system/site/name']}}">{{info['node/name'] || info['system/site/name']}}</span>
    </a>
    <button type="button"
            class="navbar-toggle collapsed"
            data-toggle="collapse"
            data-target="#navbar"
            title="{{'toggleNavigation' | translate}}"
            aria-expanded="false"
            aria-controls="navbar">
      <span class="sr-only" data-translate>toggleNavigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>
  <div id="navbar" class="navbar-collapse collapse">
    <ul class="nav navbar-nav gn-menu-xs" role="menu">
      <li class="clearfix hidden-xs" data-ng-if="gnCfg.mods.home.enabled">
        <a class="pull-left gn-logo-link" 
           data-gn-active-tb-item="{{gnCfg.mods.home.appUrl}}">
          <img class="gn-logo"
               data-ng-hide="{{gnCfg.mods.header.isLogoInHeader}}"
               alt="{{'siteLogo' | translate}}"
               data-ng-src="{{gnUrl}}../images/logos/{{info['node/id'] || info['system/site/siteId']}}.png?random{{info['system/site/lastUpdate']}}"/>
          <span class="gn-name hidden-sm hidden-md gn-margin-left"
                data-ng-if="gnCfg.mods.header.showGNName"
                data-ng-class="authenticated && user.isEditorOrMore() ? 'gn-truncate' : ''"
                title="{{info['node/name'] || info['system/site/name']}}">
            {{info['node/name'].split('|')[0] || info['system/site/name']}}
          </span>
        </a>
      </li>
      <li class="gn-menuitem-xs" data-ng-if="gnCfg.mods.search.enabled">
        <a data-gn-active-tb-item="{{gnCfg.mods.search.appUrl}}"
          title="{{'search' | translate}}">
          <i class="fa fa-fw fa-search"></i>
          <span translate class="hidden-sm">search</span>
        </a>
      </li>
      <li class="gn-menuitem-xs" data-ng-if="gnCfg.mods.map.enabled">
        <a data-gn-active-tb-item="{{isExternalViewerEnabled ? externalViewerUrl : gnCfg.mods.map.appUrl}}"
          title="{{'map' | translate}}">
          <i class="fa fa-fw fa-globe"></i>
          <span translate class="hidden-sm">makeYourMap</span>
          <span data-gnv-layer-indicator=""/>
        </a>
      </li>
      <li class="dropdown dropdown-hover open gn-clear-xs" data-ng-if="gnCfg.mods.editor.enabled"
          data-ng-show="authenticated && user.isEditorOrMore()"
          id="gn-login-dropdown">
        <a data-gn-active-tb-item="{{gnCfg.mods.editor.appUrl}}"
           title="{{'editorBoard' | translate}}"
           class="dropdown-toggle gn-menuheader-xs"
           role="button" aria-expanded="false">
          <i class="fa fa-fw fa-pencil"></i>
          <span translate class="hidden-sm">contribute</span>
        </a>
        <ul class="dropdown-menu gn-menu-xs clearfix" role="list">
          <li class="gn-menuitem-xs" role="menuitem">
            <a data-gn-active-tb-item="{{gnCfg.mods.editor.appUrl}}#/board">
              <i class="fa fa-fw fa-bars"></i>&nbsp;<span translate>editorHome</span>
            </a>
          </li>
          <li role="separator" class="divider gn-separator-xs"></li>
          <li class="gn-menuitem-xs" role="menuitem">
            <a data-gn-active-tb-item="{{gnCfg.mods.editor.appUrl}}#/create">
              <i class="fa fa-fw fa-plus"></i>&nbsp;<span translate>addRecord</span>
            </a>
          </li>
          <li class="gn-menuitem-xs" role="menuitem">
            <a data-gn-active-tb-item="{{gnCfg.mods.editor.appUrl}}#/import">
              <i class="fa fa-fw fa-upload"></i>&nbsp;<span translate>ImportRecord</span>
            </a>
          </li>
          <li class="gn-menuitem-xs" role="menuitem">
            <a data-gn-active-tb-item="{{gnCfg.mods.editor.appUrl}}#/directory">
              <i class="fa fa-fw fa-bookmark"></i>&nbsp;<span translate>directoryManager</span>
            </a>
          </li>
          <li class="gn-menuitem-xs" role="menuitem">
            <a data-gn-active-tb-item="{{gnCfg.mods.editor.appUrl}}#/batchedit">
              <i class="fa fa-fw fa-pencil"></i>&nbsp;<span translate>batchEditing</span>
            </a>
          </li>
          <li class="gn-menuitem-xs" role="menuitem" ng-if="user.isAdministratorOrMore() && healthCheck.IndexHealthCheck === true">
            <a data-gn-active-tb-item="{{gnCfg.mods.editor.appUrl}}#/accessManager">
              <i class="fa fa-fw fa-lock"/>&nbsp;<span data-translate="">accessManager</span>
            </a>
          </li>
        </ul>
      </li>
      <li class="dropdown dropdown-hover open" data-ng-show="user.isUserAdminOrMore()">
        <a data-gn-active-tb-item="admin.console"
           title="{{'adminConsole' | translate}}"
           class="dropdown-toggle gn-menuheader-xs"
           role="button" aria-expanded="false">
          <i class="fa fa-fw fa-wrench"></i>
          <span translate class="hidden-sm">adminConsole</span>
        </a>
        <ul data-ng-if="user.isUserAdmin()" class="dropdown-menu gn-menu-xs" role="list">
          <li class="gn-menuitem-xs" role="menuitem">
            <a data-gn-active-tb-item="admin.console#/home">
              <i class="fa fa-fw fa-th"></i>&nbsp;<span translate>adminHome</span>
            </a>
          </li>
          <li role="separator" class="divider gn-separator-xs"></li>
          <li class="gn-menuitem-xs" role="menuitem" data-ng-repeat="t in userAdminMenu">
            <a data-gn-active-tb-item="admin.console{{t.route}}">
              <i class="fa fa-fw {{t.icon}}"></i>&nbsp;<span translate>{{t.name | translate}}</span>
            </a>
          </li>
        </ul>
        <ul data-ng-if="user.isAdministrator()" class="dropdown-menu gn-menu-xs" role="list">
          <li class="gn-menuitem-xs" role="menuitem">
            <a data-gn-active-tb-item="admin.console#/home">
              <i class="fa fa-fw fa-th"></i>&nbsp;<span translate>adminHome</span>
            </a>
          </li>
          <li role="separator" class="divider gn-separator-xs"></li>
          <li class="gn-menuitem-xs" role="menuitem" data-ng-repeat="t in adminMenu">
            <a data-gn-active-tb-item="{{gnCfg.mods.admin.appUrl}}{{t.route}}">
              <i class="fa fa-fw {{t.icon}}"></i>&nbsp;<span translate>{{t.name | translate}}</span>
            </a>
          </li>
        </ul>
      </li>
      <li gn-static-pages-list-viewer data-section="top" data-language="{{lang}}" />
    </ul>

    <div class="navbar-form navbar-right language-switcher">
      <span class="gn-menuheader-xs visible-xs"
            data-ng-if="!authenticated && service !== 'catalog.signin' && service !== 'new.account' && !isShowLoginAsLink && !isDisableLoginForm"
            data-translate="">language</span>
      <div data-gn-language-switcher="lang"
           data-langs="langs"
           data-lang-labels="langLabels">
      </div>
    </div>

    <ul data-ng-if="gnCfg.mods.signin.enabled"
        class="nav navbar-nav navbar-right username-dropdown">
      <li class="dropdown dropdown-hover open" data-ng-show="authenticated">
        <a data-gn-active-tb-item="{{gnCfg.mods.admin.appUrl}}#/organization/users?userOrGroup={{user.username}}"
          title="{{'userDetails' | translate}}"
          class="dropdown-toggle gn-menuitem-xs"
          role="button" aria-expanded="false">
          <img class="img-circle"
            alt="{{'avatar' | translate}}"
            data-ng-src="../api/users/{{(user.id)}}.png?size=18"/>
          <div class="gn-user-info">
            <span class="gn-user-name">{{user.name}} {{user.surname}}</span><br>
            <span class="gn-user-role">{{user.profile | translate}}</span>
          </div>
          <span class="alert alert-danger ng-hide"
                data-ng-show="session.remainingTime > 0 &&
                    session.remainingTime < session.alertInTitleWhen"
                translate
                data-translate-values="{remainingTime: '{{session.remainingTime}}'}">
            sessionWillExpireIn
          </span>
        </a>
        <ul class="dropdown-menu gn-menuitem-xs" role="menu">
          <li class="text-center hidden-xs" role="menuitem">
            <img class="img-circle"
                 alt="{{'avatar' | translate}}"
                 data-ng-src="../api/users/{{(user.id)}}.png?size=56"/>
          </li>
          <li role="separator" class="divider hidden-xs"></li>
          <li class="dropdown-header hidden-xs" role="menuitem" translate>username</li>
          <li class="hidden-xs" role="menuitem">
            <a data-gn-active-tb-item="{{gnCfg.mods.admin.appUrl}}#/organization/users?userOrGroup={{user.username}}">{{user.name}} {{user.surname}}</a>
          </li>
          <li class="dropdown-header hidden-xs" role="menuitem" translate>profile</li>
          <li class="hidden-xs" role="menuitem">
            <a style="text-transform: lowercase" data-gn-active-tb-item="{{gnCfg.mods.admin.appUrl}}#/organization/users?userOrGroup={{user.username}}">{{user.profile | translate}}</a>
          </li>
          <li role="separator" class="divider hidden-xs"></li>
          <li role="menuitem">
            <a href="{{signoutUrl}}"
               title="{{'signout' | translate}}">
              <i class="fa fa-sign-out"></i>&nbsp;
              {{'signout' | translate}}
            </a>
          </li>
        </ul>
      </li>
      <li class="open signin-dropdown"
          data-ng-if="!authenticated && service !== 'catalog.signin' && service !== 'new.account' && isShowLoginAsLink">
        <a href="{{signInFormAction}}?_csrf={{csrf}}&redirectUrl={{redirectUrlAfterSign}}"
           title="{{'signIn'|translate}}"
           class="gn-menuheader-xs"
           data-ng-keypress="$event"
           id="signinLink">
          <i class="fa fa-fw fa-sign-in hidden-sm"></i>
          {{'signIn' | translate}}
        </a>
      </li>
      <li class="dropdown dropdown-hover open signin-dropdown"
        data-ng-if="!authenticated && service !== 'catalog.signin' && service !== 'new.account' && !isShowLoginAsLink && !isDisableLoginForm">
        <a href="{{gnCfg.mods.signin.appUrl | signInLink}}"
           title="{{'signIn'|translate}}"
           class="dropdown-toggle gn-menuheader-xs"
           data-ng-keypress="$event"
           data-ng-mouseover="focusLoginPopup()">
          <i class="fa fa-fw fa-sign-in hidden-sm"></i>
          {{'signIn' | translate}}
        </a>
        <ul class="dropdown-menu" role="menu">
          <li role="menuitem">
            <form name="gnSigninForm" class="navbar-form flex-row"
              action="{{signInFormAction}}" method="post" role="form">
              <input type="hidden" name="_csrf" value="{{csrf}}"/>
              <div class="form-group form-group-sm">
                <div class="input-group">
                  <span class="input-group-addon">
                    <i class="fa fa-fw fa-user"></i>
                  </span>
                  <input type="text"
                         class="form-control"
                         id="inputUsername"
                         name="username"
                         autofocus=""
                         aria-label="{{'username' | translate}}"
                         placeholder="{{'username' | translate}}"
                         data-ng-model="signinUsername"
                         required=""/>
                </div>
              </div>
              <div class="flex-spacer hidden-xs"></div>
              <div class="form-group form-group-sm">
                <div class="input-group">
                  <span class="input-group-addon">
                    <i class="fa fa-fw fa-lock"></i>
                  </span>
                  <input type="password"
                         class="form-control"
                         id="inputPassword"
                         name="password"
                         autocomplete="off"
                         data-ng-model="signinPassword"
                         aria-label="{{'password' | translate}}"
                         placeholder="{{'password' | translate}}"
                         required=""/>
                </div>
              </div>
              <div class="flex-spacer hidden-xs"></div>

              <input type="hidden" name="redirectUrl" value="{{redirectUrlAfterSign}}"/>

              <button type="submit" class="btn btn-primary btn-sm pull-right"
                      aria-label="{{'signIn' | translate}}"
                      data-ng-disabled="!gnSigninForm.$valid">
                <i class="fa fa-sign-in"></i>
              </button>
            </form>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>
